// path
const { resolve, path, join } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 生成.html文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')// 把样式提取为单独的css文件 的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 清除构建目录的插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const { web } = require('webpack')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob')
const PATHS = { src: join(__dirname, 'src') }


module.exports = {
    // mode: 'development', // 开发模式
    // mode: 'production',
    entry: {
        vendor: ['jquery', './src/js/common.js', './src/app.js',],
        index: ['./src/views/index/index.js', './src/views/index/index.html'],
        cart: './src/views/cart/index.js',


    },
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'build/'),
    },
    module: {
        rules: [
            // { test: /\.css$/,/*处理那些文件 */ use: ['style-loader', 'css-loader']/*用那些loader进行处理 */ },
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']/* 用那些loader进行处理 */ },
            { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader'] },
            { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', 'postcss-loader'] },
            {
                test: /\.(jpg|png|gif|jpeg)$/,
                // use: ['url-loader',{loader:'file-loader',options:{}}],
                loader: 'url-loader',
                options: {
                    name: '[name].[hash:4].[ext]',
                    limit: 8 * 1024,
                    esModule: false,
                    outputPath: 'assets/images/',
                    publicPath: 'assets/images/',
                },
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    // name: "[name].[hash:4].[ext]",
                    esModule: false,
                    // outputPath: 'assets/images/',
                    // publicPath: 'assets/images/'
                },
            },
            { //字体
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'assets/font/',
                    publicPath: '.assets/font',
                    name: '[name][hash:4].[ext]',
                },
            },
            {
                exclude: /\.(js|json|html|css|less|scss|png|gif|jpg|jpeg|ttf|eot|svg|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'assets/font/',
                    publicPath: '.assets/font',
                    name: '[name][hash:4].[ext]',
                },
            },
            // {
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     loader: 'eslint-loader',
            //     options: {
            //         fix: true,
            //     },
            // },
        ],
    },
    plugins: [
        new PurgecssPlugin({
            paths: glob.sync(`${PATHS}/**/*`, { nodir: true })
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            ignoreOrder: false,

        }),
        new HtmlWebpackPlugin(
            {
                template: './src/views/cart/index.html',
                filename: 'cart.html',
                chunks: ['cart', 'vendor', 'app'],
                minify: {
                    // 移除空格
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments: true,
                },
            },
        ),
        new HtmlWebpackPlugin(
            {
                template: './src/views/index/index.html', // 模板
                filename: 'index.html',
                chunks: ['index', 'vendor'],
            },
        ),
        new CleanWebpackPlugin(),
    ],
    devServer: {
        port: 8080, // 配置端口
        open: true, // 自动打开浏览器
        // 本地服务器代理
        contentBase: join(__dirname, './test-build-serve/static'), // 指定在哪个目录下找要加载的文件
        compress: true,
        hot: true, // 配置热更新

    },
    target: 'web',
}
